<template>
  <div class="content-div">
    <div class="service-info">
      <div class="hospital-name">
        <span>{{queryInfo.hospital_name}}</span>
      </div>
      <div class="service-name">{{queryInfo.give_service_name}}</div>
      <div class="service-time"><span>期望就诊时间：</span>{{queryInfo.date}}</div>
      <div class="service-money row-between flex"><span>订单金额</span>¥{{queryInfo.give_service_price}}</div>
    </div>
    <div class="btn-div">确认支付（¥{{queryInfo.give_service_price}}）</div>
  </div>
</template>
<script>
import { findDepartmentList, getTime, saveOrderGoods, selectHospitalList, findGiveServiceList } from '@/api/medical.js'
import { Toast } from 'vant'
export default {
  name: 'index',
  data () {
    return {
      form: {
        name: ''
      },
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2050, 10, 1),
      fwMinDate: new Date(),
      fwMaxDate: new Date(2050, 10, 1),
      showPicker: false,
      ksShowPicker: false,
      fwShowPicker: false,
      yyShowPicker: false,
      bdDate: null,
      fwDate: '',
      checked: false,
      queryInfo: this.$route.query,
      ksColumns: [],
      yyColumns: [],
      fnColumns: [],
      fnShowPicker: false
    }
  },
  created () {},
  methods: {
    toPage (url, query) {
      this.$router.push({
        path: url,
        query: query
      })
    },
    selectDate () {
      this.form.date = this.bdDate.getFullYear() + '-' + ((this.bdDate.getMonth() + 1) < 10 ? ('0' + (this.bdDate.getMonth() + 1)) : (this.bdDate.getMonth() + 1)) + '-' + (this.bdDate.getDate() < 10 ? ('0' + this.bdDate.getDate()) : this.bdDate.getDate())
      this.showPicker = false
    },
    onSubmit () {
      if (this.checked === false) {
        Toast.fail('请勾选我已阅读相关预约《服务条款同意书》')
        return
      }
      this.form.province = this.$store.state.app.city.province_code
      this.form.city = this.$store.state.app.city.city_code
      console.log(this.form)
      saveOrderGoods(this.form).then(res => {
        if (res.data.errcode === 0) {
          Toast.success('预约成功')
          this.$router.push({
            path: '/order'
          })
        }
      })
    },
    checkVisitor (url, query) { // 选择就诊人跳转到就诊人列表页面
      this.$router.push({
        path: url,
        query: this.$route.query
      })
    },
    onKsChange () { // 选择科室
    },
    getHospitalData () {
      this.yyShowPicker = true
      selectHospitalList({
        province: this.$store.state.app.city.province_code,
        city: this.$store.state.app.city.city_code
      }).then(res => {
        if (res.data.errcode === 0) {
          this.yyColumns = res.data.data
        }
      })
    },
    yyOnConfirm (value) {
      this.form.hospital_id = value.hospital_id
      this.form.hospital_name = value.hospital_name
      this.yyShowPicker = false
    },
    onYyCancel () {
      this.yyShowPicker = false
    },
    getDepartmentData () { // 获取科室数据
      this.ksShowPicker = true
      findDepartmentList({ hospital_id: this.form.hospital_id }).then(res => {
        if (res.data.errcode === 0) {
          this.ksColumns = res.data.data
        }
      })
    },
    ksOnConfirm (value) {
      this.form.department_id = value.id
      this.form.department_name = value.department_name
      this.ksShowPicker = false
    },
    onKsCancel () {
      this.ksShowPicker = false
    },
    getServiceData () {
      this.fnShowPicker = true
      findGiveServiceList({ hospital_id: this.form.hospital_id }).then(res => {
        if (res.data.errcode === 0) {
          this.fnColumns = res.data.data
        }
      })
    },
    fnOnConfirm (value) {
      this.fnShowPicker = false
      this.form.give_service_id = value.give_service_id
      this.form.give_service_name = value.give_service_name
    },
    onFnCancel () {
      this.fnShowPicker = false
    },
    selectfwDate () { // 确定选择服务时间
      this.form.expected_time = getTime(this.fwDate)
      this.fwShowPicker = false
    }
  },
  mounted () {
    console.log(this.$store.state)
    this.form.name = this.$route.query.visitor_name
    this.form.hospital_name = this.$route.query.hospital_name
    this.form.member_id = this.$store.state.user.severUserInfo.member_id
    this.form.visitor_id = this.$route.query.visitor_id
    this.form.give_service_id = this.$route.query.give_service_id
    this.form.hospital_id = this.$route.query.hospital_id
    this.form.payable_amount = this.$route.query.payable_amount
    this.form.give_service_name = this.$route.query.give_service_name
    this.form.note = this.$route.query.give_service_describe
  }
}
</script>

<style scoped lang="less">
  .content-div{
    width: 100%;
    height: 100%;
    padding-top: 10px;
    box-sizing: border-box;
    background-color: #F8F8F8;
    font-size: 12px;
    position: relative;
    .service-info{
      width: 300px;
      margin-left: 10px;
      background-color: #FFFFFF;
      border-radius: 6px;
      padding: 10px 10px;
      box-sizing: border-box;
      .hospital-name {
        font-size: 14px;
        margin-top: 14px;
        font-weight: 700;
        color: #232323;
        height: 20px;
        line-height: 20px;
      }
      .service-name {
        font-size: 13px;
        color: #00bec3;
        margin-top: 4px;
        height: 18px;
        line-height: 18px;
      }
      .service-time {
        color: #b7b5b5;
        border-bottom: solid 1px #f8f8f8;
        margin-top: 9px;
        padding-bottom: 12px;
        font-size: 14px;
      }
      .service-money{
        margin-top: 14px;
        color: #666;
        font-size: 14px;
      }
    }
    .btn-div {
      height: 42px;
      line-height: 42px;
      background-color: #1989fa;
      color: #FFFFFF;
      text-align: center;
      margin: 30px 10px 0px 10px;
      border-radius: 8px;
    }
    .row-between {
      justify-content: space-between;
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
</style>
